<template>
<div class="layerRtb layerRtb-threecolumn layerRtb-right">
    <three-title :title="{name:'客户评价'}" :close="false">
        <span tag="i" class="rig_close fr" @click="$parent.$parent.clickFourShow()"></span>
    </three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
         <div class="analyItem">
            <p class="analyItemTit tx-center">客评</p>
            <div class="analyItemCon">
                <div v-if="currentworkData === null">
                    <el-rate v-model="evaluateStar"></el-rate>
                    <div class="pt10" >
                        <textarea style="width: 100%;" v-model="evaluateContent" placeholder="请输入评价描述"></textarea>
                    </div>
                    <div class="mt10">
                        <rx-upload
                            class="fl"
                            :data="{id: 11}" :init="{class: 7, mime: 1}"
                            :elStyle="{width:'90px', height: '80px'}"
                            @success="successUpload">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                        <rx-viewer v-for="(item, index) of evalImgList" :key="index" class="mr10 fl">
                            <div class="look_imgHover fl relative" style="width:78px;height:78px;" >
                                <img :src="item">
                                <div class="upload_finish_div">
                                    <div class="upload_finish_bg"></div>
                                    <div class="upload_finish_linksm">
                                        <div class="dis-il-block">
                                            <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item"></a>
                                            <a href="javascript:" class="ImgBtn delect_link" @click="delectImg(index)"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </rx-viewer>
                    </div>
                </div>
                <div v-else>
                     <div v-if="currentworkData !== null ">
                        <p class="col-md-6">
                            <span class="cLightGray pr5">被评价人</span>
                            <span>{{currentworkData.workerName}}</span>
                        </p>
                        <p  class="col-md-6">
                            <span class="cLightGray pr5">电话号码</span>
                            <span>{{currentworkData.mobild}}</span>
                        </p>
                    </div>
                    <div v-if="currentworkData === null || currentworkData.custoemrEvaluate === null">暂无评价</div>
                    <div v-else>
                        <p class="clearfix">
                            <span class="cLightGray pr5 fl">评价星级</span>
                            <el-rate v-model="currentworkData.custoemrEvaluate.customerStar " disabled class="fl" style="position: relative;top: 4px;"></el-rate>
                        </p>
                        <p>
                           <span class="cLightGray pr5">评价内容</span>
                           <span>{{currentworkData.custoemrEvaluate.customerMsg}}</span>
                        </p>
                        <div>
                            <rx-viewer :images="currentworkData.custoemrEvaluate.orderPhotoEntityList" class="fl">
                                <div class="clearfix">
                                    <div v-for="(item, index) of currentworkData.custoemrEvaluate.orderPhotoEntityList" :key="index" class="fl mr10 relative imgBox">
                                        <img :src="item.photoUrl | smallImg(78, 78)" :alt="index">
                                    </div>
                                </div>
                            </rx-viewer>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="tx-center">
                    <input type="button" class="uiBtn-normal uiBtn-blue" value="确定" @click="submitData">
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getCPOrderWorkerList, saveCustomerWorkerOrderEvaluate } from '../../Resources/Api/index'
export default {
    props: ['workId'],
    data () {
        return {
            currentworkData: null, // 当前工人的评价
            evaluateStar: null, // 评价星星
            evaluateContent: '', // 评价内容
            evalImgList: [] // 评价图片
        }
    },
    created () {
        this.getCPOrderWorkerList()
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo'])
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 上传图片
        successUpload (value) {
            this.evalImgList.push(value.src)
        },
        // 图片删除
        delectImg (index) {
            this.evalImgList.splice(index, 1)
        },
        // 获取评价内容
        getCPOrderWorkerList () {
            let parm = {
                orderNo: this.leftInfo.orderno
            }
            getCPOrderWorkerList(parm).then((results) => {
                if (results.data.StatusCode === 1) {
                    const evaluateData = results.data.Body
                    if (evaluateData.length > 0) {
                        const currentData = evaluateData.filter((item) => { return Number(item.workerId) === Number(this.workId) })
                        this.currentworkData = currentData.length > 0 ? currentData[0] : null
                    }
                }
            })
        },
        // 提交评价
        submitData () {
            let parms = {
                workerId: this.workId,
                orderNo: this.leftInfo.orderno,
                evaluateMsg: this.evaluateContent,
                starLevel: this.evaluateStar,
                createNo: this.userInfo.as_cardNo,
                createName: this.userInfo.as_fullName,
                evaluateImg: this.evalImgList.join(',')
            }
            saveCustomerWorkerOrderEvaluate(parms).then(res => {
                if (res.data.StatusCode === 1) {
                    this.$message('评价提交成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>
